import {ScrollView} from 'react-native-gesture-handler';
import {Button, WhiteSpace, Flex, List, InputItem, SearchBar, Provider, PickerView, Modal, Carousel} from '@ant-design/react-native';
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Alert,
    TouchableOpacity,
} from 'react-native';
import {getNoticeByProjectId, getParkingArea, getParkingDataList} from '~/api/parking';
import CwCard from '~/components/cw-card';
import Suspensions from '~/pages/developer/publics/Susoension';
import Carouselcard from '~/components/carousel/Carouselcard';
import ImageZoom from 'react-native-image-pan-zoom';
const images = [
    {
        // Simplest usage.
        // url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
        url: 'https://ftpweb.lipopo.com.cn/111.png',
        // width: number
        // height: number
        // Optional, if you know the image size, you can set the optimization performance

        // You can pass props to <Image />.
        props: {
            // headers: ...
        },
    },
];
class CommunityDetails extends Component {
    static navigationOptions = {
        title: '车位列表',
    };

    constructor(props) {
        super(props);
        this.state = {
            id: 0,
            visible: false,
            value: undefined,
            ParkingAreaID: 0,
            ParkingName: '',
            projectId: this.props.navigation.getParam('params'),
            CompanyBuildingID: this.props.navigation.getParam('buy'),
            companyid: this.props.navigation.getParam('companyid'),
            list: [],
            seasons: [],
            selecqy: '',
            sellState1: 1,
            sellState5: 1,
            sellState7: 1,
            image: '',
            longwide: '',
            fileWide: 0,
            fileLong: 0,
            noticelist: [],
            scale: 1,
            positionX: 0,
            positionY: 0,
        };
        this.getNotice(this.state.projectId);
        this.onChange = (value) => {
            this.setState({
                value,
            });
            this.state.seasons[0].map((item) => {
                if (item.AreaName == value) {
                    this.setState({
                        id: item.ParkingAreaID,
                    });
                }
            });
            getParkingArea(this.state.projectId).then((r) => {
                if (r.code === 0) {
                    r.data.lst[0].forEach((item) => {
                        if (item.ParkingAreaID == this.state.id) {
                            this.setState({
                                ParkingAreaID: item.ParkingAreaID,
                                image: r.data.HttpHead + '/' + item.ParkingAreaID + '/' + item.FileName,
                                longwide: (item.FileLong / item.FileWide).toFixed(2),
                                fileWide: item.FileWide,
                                fileLong: item.FileLong,
                            });
                        }
                        this.setState({
                            seasons: r.data.lst,
                        });
                    });
                    this.getparklist();
                } else {
                    Alert.alert('失败1111');
                }
            });
        };
        this.onClose = () => {
            this.setState({
                visible: false,
            });
        };
        getParkingArea(this.state.projectId).then((r) => {
            if (r.code === 0) {
                this.setState({
                    ParkingAreaID: r.data.lst[0][0].ParkingAreaID,
                    seasons: r.data.lst,
                    selecqy: r.data.lst[0][0].value,
                    image: r.data.HttpHead + '/' + r.data.lst[0][0].ParkingAreaID + '/' + r.data.lst[0][0].FileName,
                    longwide: (r.data.lst[0][0].FileLong / r.data.lst[0][0].FileWide).toFixed(2),
                    fileWide: r.data.lst[0][0].FileWide,
                    fileLong: r.data.lst[0][0].FileLong,
                });
                this.getparklist();
            } else {
                Alert.alert(r.msg + '333333');
            }
        });
    }

    getparklist() {
        getParkingDataList({
            projectId: this.state.projectId,
            areaId: this.state.ParkingAreaID,
            parkingName: this.state.ParkingName,
            sellState1: this.state.sellState1 == 1 ? 1 : 0,
            sellState5: this.state.sellState5 == 1 ? 5 : 0,
            sellState7: this.state.sellState7 == 1 ? 7 : 0,
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    list: r.data,
                });
            } else {
                Alert.alert(r.msg + '22222');
            }
        });
    }
    getNotice(projectId) {
        getNoticeByProjectId(projectId).then((r) => {
            if (r.code === 0) {
                let notlist = [];
                if (r.data.lstFavorite.length > 0) {
                    r.data.lstFavorite.forEach((item) => {
                        notlist.push(item);
                    });
                }
                if (r.data.lstOrderLog.length > 0) {
                    r.data.lstOrderLog.forEach((item) => {
                        notlist.push(item);
                    });
                }
                if (r.data.lstView.length > 0) {
                    r.data.lstView.forEach((item) => {
                        notlist.push(item);
                    });
                }
                this.setState({
                    noticelist: notlist,
                });
            } else {
                console.log(r.msg);
            }
        });
    }
    render() {
        const searchBarItem = {
            wrapper: {backgroundColor: 'transparent'},
            search: {color: 'gray', marginLeft: 7},
            cancelTextContainer: {display: 'none'},
        };
        const onsearchBar = (text) => {
            if (text != '' || text != null) {
                this.setState(
                    {
                        ParkingName: text,
                    },
                    () => {
                        this.getparklist();
                    },
                );
            }
        };
        const sellState1 = () => {
            if (this.state.sellState1 == 1) {
                this.setState(
                    {
                        sellState1: 0,
                    },
                    () => {
                        this.getparklist();
                    },
                );
            } else {
                this.setState(
                    {
                        sellState1: 1,
                    },
                    () => {
                        this.getparklist();
                    },
                );
            }
        };
        const sellState5 = () => {
            if (this.state.sellState5 == 1) {
                this.setState(
                    {
                        sellState5: 0,
                    },
                    () => {
                        this.getparklist();
                    },
                );
            } else {
                this.setState(
                    {
                        sellState5: 1,
                    },
                    () => {
                        this.getparklist();
                    },
                );
            }
        };
        const sellState7 = () => {
            if (this.state.sellState7 == 1) {
                this.setState(
                    {
                        sellState7: 0,
                    },
                    () => {
                        this.getparklist();
                    },
                );
            } else {
                this.setState(
                    {
                        sellState7: 1,
                    },
                    () => {
                        this.getparklist();
                    },
                );
            }
        };
        const _onScale = () => {
            console.log(555);
        };
        return (
            <View style={{width: '100%', height: '100%', backgroundColor: '#ffffff'}}>
                <ScrollView style={{flex: 1}}>
                    <View style={{width: '92%', marginLeft: '4%', marginRight: '4%', marginTop: 10}}>
                        {this.state.noticelist != '' && <Carouselcard noticelist={this.state.noticelist} type={1} />}
                    </View>
                    <Flex style={{width: '100%', marginBottom: 5}}>
                        <View style={styles.header} ref={(ref) => (this.search = ref)}>
                            <SearchBar
                                placeholder="请输入你要查询的车位号"
                                placeholderTextColor="gray"
                                style={styles.searchBar}
                                styles={searchBarItem}
                                onChange={onsearchBar}
                                ref={(ref) => (this.searchBar = ref)}
                            />
                        </View>
                        <View
                            style={{
                                alignItems: 'center',
                                padding: 8,
                                flexDirection: 'row',
                                width: '28%',
                            }}>
                            {/*<Text style={styles.textsize}>区域：</Text>*/}
                            <Flex style={{width: '100%'}} justify="center">
                                <Text numberOfLines={1} style={styles.textpicker} onPress={() => this.setState({visible: true})}>
                                    {this.state.value == undefined ? this.state.selecqy : this.state.value}
                                </Text>
                                <Image style={{width: 14, height: 14, paddingLeft: 10}} source={require('~/assets/public/xiala.png')} />
                            </Flex>
                            <Modal popup visible={this.state.visible} animationType="slide-up" onClose={this.onClose}>
                                <View
                                    style={{
                                        paddingVertical: 20,
                                        paddingHorizontal: 20,
                                    }}>
                                    <PickerView onChange={this.onChange} value={this.state.value} data={this.state.seasons} cascade={false} />
                                </View>
                                <Button type="primary" onPress={this.onClose}>
                                    确定
                                </Button>
                            </Modal>
                        </View>
                    </Flex>

                    <View style={{width: '100%', height: global.AppData.screen_width * this.state.longwide, marginTop: 10}}>
                        {this.state.image !== '' && (
                            <ImageZoom
                                style={{position: 'absolute', left: 0, top: 0}}
                                onMove={(position) => {
                                    this.setState({
                                        positionX: position.positionX,
                                        positionY: position.positionY,
                                        scale: position.scale,
                                    });
                                }}
                                panToMove={true}
                                cropWidth={global.AppData.screen_width}
                                cropHeight={global.AppData.screen_width * this.state.longwide}
                                imageWidth={global.AppData.screen_width}
                                imageHeight={global.AppData.screen_width * this.state.longwide}
                                minScale={1}
                                maxScale={6}>
                                <Image
                                    style={{width: global.AppData.screen_width, height: global.AppData.screen_width * this.state.longwide}}
                                    source={{uri: this.state.image}}
                                />
                                {this.state.list.map((item) => {
                                    return (
                                        <View
                                            style={{
                                                position: 'absolute',
                                                left: (global.AppData.screen_width / this.state.fileWide) * item.ParkX,
                                                top: (global.AppData.screen_width / this.state.fileWide) * item.ParkY,
                                            }}>
                                            <Text
                                                onPress={() => {
                                                    this.props.navigation.push('ParkInfo', {
                                                        parkingid: item.ParkingDataID,
                                                    });
                                                }}
                                                style={{
                                                    width: 5,
                                                    height: 5,
                                                    borderRadius: 2.5,
                                                    overflow: 'hidden',
                                                    backgroundColor: item.state == '可售' ? 'green' : item.state == '已售' ? 'red' : 'blue',
                                                }}
                                            />
                                        </View>
                                    );
                                })}
                            </ImageZoom>
                        )}
                        {/*<Image*/}
                        {/*    style={{width: global.AppData.screen_width, height: global.AppData.screen_width * this.state.longwide}}*/}
                        {/*    source={{uri: this.state.image}}*/}
                        {/*/>*/}
                    </View>
                    <View style={{width: '100%', backgroundColor: 'white'}}>
                        <Flex justify={'between'} style={{width: '92%', padding: 10, marginLeft: '4%', marginRight: '4%', marginTop: '2%'}}>
                            <Flex onPress={sellState1} justify={'center'} style={styles.flview}>
                                {this.state.sellState1 == 1 ? (
                                    <Image style={styles.flview} source={require('~/assets/community/select1.png')} />
                                ) : (
                                    <Image style={styles.flview} source={require('~/assets/community/noselect1.png')} />
                                )}
                                {/* <Text>未售</Text> */}
                            </Flex>
                            <Flex onPress={sellState5} justify={'center'} style={styles.flview}>
                                {this.state.sellState5 == 1 ? (
                                    <Image style={styles.flview} source={require('~/assets/community/select2.png')} />
                                ) : (
                                    <Image style={styles.flview} source={require('~/assets/community/noselect2.png')} />
                                )}
                                {/*<Text>已定</Text>*/}
                            </Flex>
                            <Flex onPress={sellState7} justify={'center'} style={styles.flview}>
                                {this.state.sellState7 == 1 ? (
                                    <Image style={styles.flview} source={require('~/assets/community/select3.png')} />
                                ) : (
                                    <Image style={styles.flview} source={require('~/assets/community/noselect3.png')} />
                                )}
                                {/*<Text>已售</Text>*/}
                            </Flex>
                        </Flex>
                        {this.state.list.map((item, index) => {
                            return (
                                <TouchableOpacity
                                    onPress={() => {
                                        this.props.navigation.push('ParkInfo', {
                                            parkingid: item.ParkingDataID,
                                        });
                                    }}>
                                    <CwCard item={item} key={index} />
                                </TouchableOpacity>
                            );
                        })}
                    </View>
                </ScrollView>
                <Suspensions navigation={this.props.navigation} />
            </View>
        );
    }
}

export default CommunityDetails;
const styles = StyleSheet.create({
    header: {
        width: '72%',
        paddingLeft: '2%',
    },
    textpicker: {
        fontSize: 14,
        borderRadius: 5,
        textAlign: 'center',
        padding: 5,
    },
    textsize: {
        width: '30%',
        fontSize: 14,
        color: '#333333',
    },
    flview: {
        borderRadius: 14,
        backgroundColor: 'white',
        width: 64,
        height: 24,
        alignItems: 'center',
    },
    // icon: {width: 24, height: 24},
    view: {
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingTop: 10,
        paddingLeft: 5,
        paddingRight: 5,
    },
    views: {
        flexDirection: 'column',
        marginLeft: 10,
        marginTop: 10,
        marginRight: 10,
        borderWidth: 0.3,
        paddingBottom: 20,
    },
    searchBar: {
        backgroundColor: '#FFFFFF',
        // borderColor:'#d3d3d3',
        color: '#000000',
        // borderWidth: 1,
        borderRadius: 17,
        height: 28,
        fontSize: 13,
    },
    textcolor: {
        fontSize: 13,
        color: '#CE2E32',
    },
});
